import { ClassifyApi, editClassify } from '@/api/premium/category/classify'
import {
  AtlasScope,
  ClassifyItem,
  ClassifyShow,
  ClassifyType,
  EditClassifyReq,
} from '@/api/premium/category/model/classifyModel'
import { useStore } from '@/store'
import { computed, reactive } from '@vue/runtime-core'
import { message } from 'ant-design-vue'
import { EditClassifyDiaState } from '../type'

const useEditAtlasCDialog = (searchApi: AsyncFun) => {
  const store = useStore()
  const editAtlasCDialogState = reactive<EditClassifyDiaState>({
    visiable: false,
    currentId: '',
    formData: {
      parentId: '',
      name: '',
      scope: AtlasScope.THEME,
      redirectUrl: '',
      banner: '',
      image: '',
      isShow: ClassifyShow.SHOW,
    },
  })

  const openEditAtlasCDia = (classifyItem: ClassifyItem) => {
    editAtlasCDialogState.currentId = classifyItem.id
    editAtlasCDialogState.formData.parentId = classifyItem.parentId
    editAtlasCDialogState.formData.name = classifyItem.name
    editAtlasCDialogState.formData.scope = classifyItem.scope
    editAtlasCDialogState.formData.redirectUrl = classifyItem.redirectUrl
    editAtlasCDialogState.formData.banner = classifyItem.banner
    editAtlasCDialogState.formData.image = classifyItem.image
    editAtlasCDialogState.formData.isShow = classifyItem.isShow

    editAtlasCDialogState.visiable = true
  }
  const enterEditAtlasC = async () => {
    const reqData: EditClassifyReq = {
      ...editAtlasCDialogState.formData,
      type: ClassifyType.ATLAS,
      id: editAtlasCDialogState.currentId,
    }
    await editClassify(reqData)
    message.success('编辑成功！')
    editAtlasCDialogState.visiable = false
    await searchApi()
  }
  const editClassifyLoading = computed(() =>
    store.getters['global/isOpLoading'](ClassifyApi.EDIT_CLASSIFY)
  )

  return {
    editAtlasCDialogState,
    openEditAtlasCDia,
    enterEditAtlasC,
    editClassifyLoading,
  }
}

export default useEditAtlasCDialog
